<template>
  <div style="width: 95%;margin: auto;">
    <!-- 
      :inline :把el-form-item 设置 行内元素
       -->
    <el-form :inline="true" :model="buildingObj.buildingForm" class="demo-form-inline">
      <el-form-item style="width: 250px;">
        <el-input v-model="buildingObj.buildingForm.numbers" placeholder="请输入楼号" clearable />
      </el-form-item>
      <el-form-item style="width: 250px;">
        <el-input v-model="buildingObj.buildingForm.units" placeholder="请输入单元" clearable />
      </el-form-item>
      <el-form-item style="width: 250px;">
        <el-input v-model="buildingObj.buildingForm.remarks" placeholder="备注" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryCondition(1)">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div style="width: 95%;margin: auto;">
    <el-button type="primary" :icon="Plus" @click="showDialog()"></el-button>
    <el-button type="primary" :icon="Delete" @click="batchedDeleteByIds()">批量删除</el-button>
  </div>
  <el-table :data="buildingObj.buildingData" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
    <!-- 添加复选框选项 -->
    <el-table-column type="selection" width="55" />
    <el-table-column label="编号" prop="id" width="150px" fixed />
    <el-table-column label="楼号" prop="numbers" width="150px" />
    <el-table-column label="单元" prop="units" width="150px" />
    <el-table-column label="房屋" width="200px">
      <!-- 插槽 -->
      <template #default="scope">
        <span v-for="(house, index) in scope.row.houses">
          <el-tag v-if="house.status == 0" type="success">{{ house.numbers }}</el-tag>
          <el-tag v-else type="danger">{{ house.numbers }}</el-tag>
        </span>
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="remarks" width="150px" />
    
    <el-table-column width="150px" fixed="right" label="操作">
      <template #default="scope">
        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)" />
        <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
  <div style="width: 95%;margin: 10px auto;">
    <el-pagination background layout="prev, pager, next" v-model:page-size="buildingObj.buildingForm.pageSize"
      v-model:current-page="buildingObj.buildingForm.pageNum" :total="buildingObj.buildingForm.total"
      @current-change="queryCondition" />
  </div>

  <!-- 新增和修改对话框 -->
  <div>
    <el-dialog v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="540" :before-close="handleClose">
      <el-form :inline="true" :model="dialog.building" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="dialog.building.numbers" placeholder="请输入楼号" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="dialog.building.units" placeholder="请输入单元号" clearable />
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="dialog.owner.sex" placeholder="请选择性别" clearable style="width: 220px;">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-input v-model="dialog.owner.tel" placeholder="手机号码" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="dialog.owner.identity" placeholder="身份证" clearable style="width: 220px;" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dialog.owner.houseId" placeholder="请选择门牌号" clearable style="width: 200px;">
            <el-option v-for="(house, index) in house.list" :key="index"
              :label="house.buildingId + '栋-' + house.numbers" :value="house.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="dialog.building.remarks" placeholder="备注" clearable style="width: 220px;" />
        </el-form-item>
        <!-- <el-form-item>
          <el-date-picker v-model="dialog.owner.deltime" type="datetime"placeholder="选择时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" style="width: 200px;"/>
        </el-form-item> -->
        <div style="text-align: right;">
          <el-button type="primary" @click="updateOwnerData()">{{ dialog.btnText }}</el-button>
          <el-button>重置</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
//1.引入ref和reactive
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { Delete, Edit } from '@element-plus/icons-vue'
// import ownerApi from './api/OwnerApi'
import { Plus } from '@element-plus/icons-vue'
// import houseApi from './api/HouseApi';
import { ElMessage } from 'element-plus'
import buildingApi from '@/api/BuildingApi';

//2.响应数组，表示表格中展示数据
let buildingObj = reactive({
  buildingData: [],
  buildingForm: {
    pageSize: 3, //表示页面只能显示2条
    pageNum: 0,
    total: 0
  }
});

//定义对象控制对话框相关初始化数据
let dialog = reactive({
  dialogVisible: false, //表示对话框默认不显示
  building: {
    numbers:"",
    units:"",
    remarks:""
  },
  dialogTitle: "",
  btnText: ""
})

//定义数组，存放批量删除元素集合
const building = reactive({
  buildingIds: [],
})

//根据id删除业主信息
const handleDelete = async (row) => {
  //调用api提供函数删除
  let response = await buildingApi.delById(row.id);
  if (response.success) {
    //1.显示提示信息
    ElMessage.success("删除成功");
    //2.刷新页面
    queryCondition(1);
  }
}

//实现批量删除操作
const batchedDeleteByIds = async () => {
  //1.判断数组中是否包含删除元素
  if (building.buildingIds.length <= 0) {
    ElMessage.warning("请选择删除项...")
    return; //结束
  }

  let ids = [];
  //2.遍历数组，获取所有id值
  for (let i = 0; i < building.buildingIds.length; i++) {
    let o = building.buildingIds[i];
    //把值添加到数组中
    ids.push(o.id);
  }

  //3.发送异步请求
  let response = await buildingApi.batchedDeleByIds(ids.toString());
  if (response.success) {
    //显示提示信息
    ElMessage.success("批量删除成功")
    //刷新页面
    queryCondition(1);
  }
}
//复选框被选择触发函数
const handleSelectionChange = (rows) => {
  building.buildingIds = rows;
}

//新增或者修改业主信息函数
const updateOwnerData = async () => {
  //判断当前操作是否为添加
  if (dialog.btnText == "确认") {
    console.log("--------添加--------");
    //调用api方法，实现新增数据
    let response = await buildingApi.addBuilding(dialog.building);
    if (response.success) {
      //1.清空表单
      dialog.building = {};
      // dialog.owner = {};
      //2.刷新页面
      queryCondition(1);
      //3.显示提示信息
      ElMessage.success("添加成功")
      //4.关闭对话框
      dialog.dialogVisible = false;
    } else { //新增失败Building
      ElMessage.error("添加失败")
    }
  } else { //表示修改操作

    //调用ownerApi中修改函数实现更新指定业主信息
    let response = await buildingApi.updateBuildingById(dialog.building);
    if (response.success) {
      //1.清空表单
      dialog.building = {};
      //2.刷新页面
      queryCondition(buildingObj.buildingForm.pageNum);
      //3.显示提示信息
      ElMessage.success("修改成功")
      //4.关闭对话框
      dialog.dialogVisible = false;
    }
  }
}

//设置新增或者修改对话框显示
const showDialog = async () => {
  dialog.dialogTitle = "添加楼宇"
  dialog.btnText = "确认";
  // queryHouses(); //查询house信息
  dialog.dialogVisible = true; //显示对话框
}

// //查询所有house信息函数
// const queryHouses = async () => {
//   //查询所有房屋门牌号
//   let res = await houseApi.queryAll();
//   if (res.data.success) {
//     house.list = res.data.data;
//     dialog.dialogVisible = true; //显示对话框
//   }
// }
//编辑业主信息
const handleEdit = (index, row) => {
  //回显编辑业主信息
  dialog.building = row;
  dialog.dialogTitle = "编辑楼宇信息"
  dialog.btnText = "编辑"
  dialog.dialogVisible = true;//显示对话框
}
//根据条件查询数据
const queryCondition = async (currentPage) => {
  buildingObj.buildingForm.pageNum = currentPage;
  let res = await buildingApi.selectAll(buildingObj.buildingForm);
  if (res.data.success) {
    //获取响应数据赋值给  ownerData 变量
    buildingObj.buildingData = res.data.data.list;
    buildingObj.buildingForm.pageNum = res.data.data.pageNum;
    buildingObj.buildingForm.pageSize = res.data.data.pageSize;
    buildingObj.buildingForm.total = res.data.data.total;
  }
}
//在组件实例挂载元素上之后发送请求获取数据
onMounted(() => {
  //发送请求获取数据
  queryCondition(1);
});

</script>